var oList = [];

var id = location.search.split("=")[1];//从=号后面的内容
console.log("第几个li" + id);
var taskId = "";
$(".btn1").eq(0).css({ background: "#4A90E2" });

//			var data = (localStorage.getItem("sou"));

$.ajax({
    url: host + "/buss/task/getOne?id=" + id,
    type: "get",
    success: function (res) {
        console.log(JSON.stringify(res));

        if (res.success) {
            var name = res.data;
            var url = name.skipHerf;
            var money = name.userPrice;
            var nextime = name.sout;
            var text = name.name;
            var remarks = name.remarks
            var imgUrl = name.imgIcon;
            var taskStatus = name.taskStatus;
            var imgShili = name.imgShili.split(",");
            taskId = name.id;
            var shiliImg = [];
            if (name.imgUploadShili !== null && name.imgUploadShili.length > 0) {
                shiliImg = name.imgUploadShili.split(",");
            }


            console.log(url + "ni" + money)

            document.getElementsByClassName("img1")[0].setAttribute("src", imgUrl);
            document.getElementsByClassName("qian")[0].innerText = money;
            document.getElementsByClassName("xuzhi")[0].innerHTML = remarks;
            document.getElementsByClassName("text")[0].innerText = text;

            //投放中的任务的放弃任务颜色灰色
            if (taskStatus == 0) {
                $(".end-begin").eq(0).css({ background: "#ccc" })

            }
            //渲染步骤图片

            if (imgShili !== null && imgShili.length > 0) {
                var leng = imgShili.length;
                var str = "";
                $(".visibileToggle").eq(0).css({ display: "block" });
                $(".bushu").eq(0).html(leng)

                for (let i = 0; i < leng; i++) {
                    var n = i + 1;
                    str += '<div class="mui-slider-item">' +
                        '<div class="pto meng" onclick="big(\'' + imgShili[i] + '\')" data-num=" ' + n + ' ">' +
                        '<img class="img min" src=" ' + imgShili[i] + ' " alt=""  data-preview-src="" data-preview-group="1" />' +
                        '</div>' +
                        '</div>';


                }

                var str1 = '<div class="mui-slider-item">' +
                    '<div class="pto txt">' +
                    '<h4>详细教程</h4>' +
                    '<span>共<span class="bushu">5</span>步</span>' +
                    '</div>' +
                    '</div>';


                var str2 = str1 + str
                $(".gropRight").eq(0).html(str2);
                $(".bushu").eq(0).html(leng);
            }


            //上传图片时的示例图片
            // if (shiliImg !== null && shiliImg.length > 0) {
            //     var leng1 = shiliImg.length;
            //     console.log("示例图片的长度：" + leng1);
            //     var strA = "";
            //     $(".shili").eq(0).css({ display: "block" });
            //
            //
            //     for (let i = 0; i < leng1; i++) {
            //
            //         strA += '<li onclick="big(\'' + shiliImg[i] + '\')">' +
            //             '<img class="shiliImg" src="' + shiliImg[i] + '" alt="" />' +
            //             '</li>';
            //     }
            //
            //     $(".shiliUl").eq(0).html(strA);
            //     $(".shiliShu").eq(0).html(leng1);
            // }




            //开始任务
            document.getElementsByClassName("begin")[0].addEventListener("click", function () {
                window.location.href = url;

            }, false)

            //提交任务
            function tijiao() {
                //判断是否输入手机号，姓名,产品名，身份证号码，支付宝账号
                console.log(oList);
                console.log(oList.length);
                var ming = document.getElementsByClassName("shu1")[0].value;
                var number = document.getElementsByClassName("shu2")[0].value;
                var ID = document.getElementsByClassName("shu3")[0].value;
                var payNumber = document.getElementsByClassName("shu4")[0].value;
                var productName = document.getElementsByClassName("shu5")[0].value;
                var imgPath;

                if (oList.length == 1) {
                    imgPath = oList[0]
                } else {
                    var patt = "";
                    for (var a = 0; a < oList.length - 1; a++) {
                        patt += oList[a] + ","
                    }
                    imgPath = patt + oList[oList.length - 1]
                }

                console.log(ming + ":" + number + ":" + taskId + "]]]" + imgPath);



                //上传任务
                $.ajax({
                    type: 'POST',
                    url: host + "/buss/task/log/save",
                    data: {
                        taskId: id,
                        name: ming,
                        phone: number,
                        imgUpload: imgPath,
                        ID:ID,
                        payNumber:payNumber,
                        productName:productName
                    },
                    success: function (res) {
                        console.log(res.msg);
                        console.log("提交成功")
                        if (res.success) {
                            window.location.href = "./list.html"
                        }

                        if (!res.success) {
                            toast(res.msg, 500);
                        }
                    },
                    error: function () {
                        console.log("error")
                    }


                });

            }


            //上传图片

            var inputBox = document.getElementById("file");
            var img = document.getElementById("img");
            var index = 0;
            inputBox.addEventListener("change", function () {

                upload(inputBox.files[0]);
                var oDiv = document.createElement("div");
                var omg = document.createElement("img");
                omg.setAttribute("class", "imgSmall");
                oDiv.setAttribute("class", "imgDiv");
                oDiv.innerHTML = '<img class="imgClose" src="./images/close.png">'
                oDiv.appendChild(omg);
                document.getElementById("tuList").insertBefore(oDiv, document.getElementById("lable"));

                var file = this.files[0];
                if (!!file) {
                    //读取本地文件，图片文件转换为base64
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        //读取完毕后输出结果
                        console.log(this.result);
                        omg.setAttribute("src", this.result);
                        omg.setAttribute("data-index", index);
                        index++;
                    }
                }

            })


            $("#tuList").on("click", ".imgDiv", function () {
                var i = $(this).find(".imgSmall").attr("data-index");
                oList.splice(i, 1);
                $(this).remove();
                console.log("看看剩余的图片数组内容" + oList)
            })


            $(".btn1").eq(0).click(function () {
                if (checkform()) {
                    tijiao();
                }

            });

            function checkform() {
                if ($(".shu1").eq(0).val().length == 0) {
                    toast("请输入姓名", 500);
                    return false;
                }

                if ($(".shu2").eq(0).val().length == 0) {
                    toast("请输入手机号", 500);
                    return false;
                }

                if ($(".shu3").eq(0).val().length == 0) {
                    toast("请输入身份证号", 500);
                    return false;
                }

                if ($(".shu4").eq(0).val().length == 0) {
                    toast("请输入支付宝账号", 500);
                    return false;
                }

                if ($(".shu5").eq(0).val().length == 0) {
                    toast("请输入产品名字", 500);
                    return false;
                }
                // 取消图片验证，先测试后面流程
                if (oList.length < 1) {
                    toast("请上传图片", 500);
                    return false;
                }
                return true;
            }
            function upload(file) {
                var formdata = new FormData();
                // 上传到服务器的字段名称
                formdata.append("file", file);
                $.ajax({
                    url: host + "/upload/Img",
                    type: 'POST',
                    cache: false,
                    data: formdata,
                    timeout: 5000,
                    //必须false才会避开jQuery对 formdata 的默认处理
                    // XMLHttpRequest会对 formdata 进行正确的处理
                    processData: false,
                    //必须false才会自动加上正确的Content-Type
                    contentType: false,
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        console.log(JSON.stringify(data))
                        if (data.success) {
                            oList.push(data.data);
                            $("#formStatus").val("true");
                            checkform();
                        } else {
                            toast("请稍等，正在上传图片", 500);
                        }


                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    }
                })
            }
        }

    }


})





//点击返回列表

$(".dLi").eq(0).click(function () {
    window.location.href = "./list.html"
})

//点击放弃任务

$(".end-begin").eq(0).click(function () {
    console.log("fangqirenwu" + taskId)
    $.ajax({
        url: host + "/buss/task/log/del?taskId=" + id,
        type: "post",

        success: function (res) {
            console.log(JSON.stringify(res))
            toast(res.msg, 500);
            setTimeout(function () {
                window.location.href = "./list.html";
            }, 500)


        },
        error: function () {
            console.log("放弃任务ajax失败")
        }
    })
})



//点击图片放大
function big(src) {
    console.log(src)
    $(".bigPreview").eq(0).attr("src", src)
    $(".tan").eq(0).css({ display: "block" });

    $(".dclose").eq(0).click(function () {
        $(".tan").eq(0).css({ display: "none" });
    })


}


//验证手机号码
function upperCase() {

    var phone = document.getElementsByClassName('shu2')[0].value;

    if (!(/^1[34578]\d{9}$/.test(phone))) {

        toast("手机号码有误，请重填", 500);
        document.getElementsByClassName('shu2')[0].placeholder = '注册所用手机号'
        return false;

    }

}

//验证身份证号码

function isCardNo(){
    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
    var card = document.getElementsByClassName('shu3')[0].value;
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(reg.test(card) === false) {
        toast("身份证输入不合法，请重填", 500);
        document.getElementsByClassName('shu3')[0].placeholder= "注册所用身份证号";
        return  false;
    }
}